<template>
	<div class="wrapper">
		<swiper :options="swiperOption" v-if="showSwiper">
			<!-- slides -->
			<swiper-slide v-for ='item of list' :key="item.id"><img class="swiper-img" :src="item.imgUrl" /></swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination"  slot="pagination"></div>   
		</swiper>
	</div>
	
</template>
<script>
	export default {
		name: "HomeSwiper",
		props:{
			list:Array
		},
		data:function(){
			return{
				swiperOption:{
					pagination:'.swiper-pagination',
					loop:true
				}			
			}
		},
		computed:{
			showSwiper:function(){
				return this.list.length//判断swiper的数据是否是空
			}
		}
	}
</script>
<style lang="stylus" scoped>
	.wrapper {
		width: 100%;
		height: 0px;
		overflow: hidden;
		padding-bottom: 30%;
		background: #ccc;
		// 这样宽高比不会变
	}
	.swiper-container-horizontal .swiper-pagination-bullets {
		//bottom: 75px;
	}
	.wrapper >>> .swiper-pagination-bullet-active{
		background: #fff;
	}
	.swiper-img{
		width: 100%;
	}
</style>